<template>
	<view class="bind-device">
		<g-navbar title="绑定终端"></g-navbar>
		<view class="bind-device-form-container">
			<uni-forms class="form-main" :modelValue="formData" :rules="rules" ref="bindDeviceForm">
				<uni-forms-item class="form-item" label="终端类型" name="model_type_id">
					<g-input type="select" placeholder="请选择终端类型" v-model="formData.model_type_id"
						:range="modelTypeList" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="机器编号" name="model_sn">
					<g-input type="scanCode" inputType="text" :maxLength="30" placeholder="请输入机器编号"
						v-model="formData.model_sn" />
				</uni-forms-item>
				<!-- 				<uni-forms-item class="form-item" label="联系人" name="customer_id">
					<g-input type="phone" placeholder="请输入联系人" v-model="formData.customer_id" />
				</uni-forms-item> -->
			</uni-forms>
		</view>
		<view class="btn-wrapper">
			<g-button btn_text="确定绑定" :width="686" :height="104" :fontSize="32" class="global-btn" @click="bind" />
		</view>

	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		Ref,
		ref
	} from "vue";
	import {
		onReady
	} from '@dcloudio/uni-app';
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import {ROUTE_TYPE} from '@/enum/router';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	interface IBindDeviceFormData {
		customer_id : string;
		model_sn : string;
		model_type_id : string;
	}

	const bindDeviceForm : Ref<any> = ref(null);

	const formData : IBindDeviceFormData = reactive({
		customer_id: '',
		model_sn: '',
		model_type_id: '',
	})

	const rules = {
		model_sn: {
			rules: [{
				require: true,
				errorMessage: '请输入终端SN号'
			}]
		},
		model_type_id: {
			rules: [{
				require: true,
				errorMessage: '请选择终端类型'
			}]
		}
	}

	interface IModelTypeItem {
		text : string;
		value : number;
		disable : boolean;
	}

	interface IMachineTypeItem {
		created_at : string;
		id : number;
		name : string;
		status : number;
	}

	let modelTypeList : IModelTypeItem[] = reactive([]);


	const getModelTypeList = async () : Promise<void> => {
		const {
			data
		} = await uni.http.POST(REST_URL.deviceType);
		data.forEach((item : IMachineTypeItem) => {
			const temp : IModelTypeItem = {
				text: item.name,
				value: item.id,
				disable: item.status != 1
			}
			modelTypeList.push(temp)
		})
		console.log('modelTypeList===>', modelTypeList);
	}

	getModelTypeList();

	onReady(() => {
		bindDeviceForm.value.setRules(rules);
	})

	const store = useStore();

	const bind = () => {
		formData.customer_id = store.getters[GET_STORE_USERINFO].id;
		console.log(formData);
		bindDeviceForm.value.validate().then(async (form : IBindDeviceFormData) => {
			console.log(form)
			const { data } = await uni.http.POST(REST_URL.bindDevice, formData);
			console.log('data===>', data);
			uni.router.route({
				url:'/pages_device/device_list/deviceList',
				type:ROUTE_TYPE.REDIRECTTO,
				success:()=>{
					uni.prompt.$showToast('绑定成功');
				}
			})
			// uni.navigateBack({
			// 	success:()=>{
			// 		uni.prompt.$showToast('绑定成功');
			// 	}
			// })
			

		})
	}
</script>

<style scoped lang="scss">
	@import "./bindDevice.scss";
</style>